<template>
  <div>
    <el-container>
      <el-aside width="280px">
        <bloodApplicationFormLeftCard @userInfo="getUserInfo"></bloodApplicationFormLeftCard>
      </el-aside>
      <el-main>
        <div>
          <el-button size="mini" type="primary" :disabled="disabledSave?true:false" @click="addsxsqdDialog = true">新增申请单</el-button>
          <el-button size="mini" type="primary">新增(紧急)</el-button>
          <el-button size="mini" type="primary" :disabled="disabledSave?true:false">保存</el-button>
          <el-button size="mini" type="primary" disabled>作废</el-button>
          <el-button size="mini" type="primary" disabled>申请</el-button>
          <el-button size="mini" type="primary" disabled>审核</el-button>
          <el-button size="mini" type="primary">核准签发</el-button>
          <el-button size="mini" type="primary" disabled>回退</el-button>
          <el-button size="mini" type="primary">解除备血</el-button>
          <el-button size="mini" type="primary">打印预览</el-button>
          <el-button size="mini" type="primary">打印检查表</el-button>
          <el-button size="mini" type="primary">预输血明细</el-button>
          <el-button size="mini" type="primary" @click="sxpjDialog = true">输血效果评价</el-button>
          <el-button size="mini" type="primary">补录不良反应</el-button>
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>患者信息</span>
            <span class="cardRight">
              <el-link>大量用血:否 申请单:</el-link>
              <el-link type="success">输血科已审核</el-link>
              <el-link>用血前评估:</el-link>
              <el-link type="success">输血科已审核</el-link>
              <el-link>输血记录:</el-link>
              <el-link type="danger">不可填写</el-link>
              <el-link>效果评价:</el-link>
              <el-link type="danger">不可填写</el-link>
            </span>
          </div>
          <div class="text item">
            <el-form
              :inline="true"
              label-width="78px"
              :model="formInfo"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="姓名">
                <el-input v-model="formInfo.brxm"></el-input>
              </el-form-item>
              <el-form-item label="住院号">
                <el-input v-model="formInfo.zyh"></el-input>
              </el-form-item>
              <el-form-item label="输血史">
                <el-select v-model="formInfo.sxs">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="住院次数">
                <el-input v-model="formInfo.zycs"></el-input>
              </el-form-item>
              <el-form-item label="费用类别">
                <el-select v-model="formInfo.sblx">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-form
              :inline="true"
              label-width="78px"
              :model="formInfo"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="性别">
                <el-input v-model="formInfo.brxb"></el-input>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="formInfo.brnl"></el-input>
              </el-form-item>
              <el-form-item label="反应史">
                <el-select v-model="formInfo.name">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="妊娠史">
                <el-input v-model="formInfo.rcs"></el-input>
              </el-form-item>
              <el-form-item label="诊断">
                <el-input v-model="formInfo.ryzd"></el-input>
              </el-form-item>
            </el-form>
            <el-form
              :inline="true"
              label-width="78px"
              :model="formInfo"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="床号">
                <el-input v-model="formInfo.bch"></el-input>
              </el-form-item>
              <el-form-item label="ABO|RHD">
                <el-input style="width:81px" v-model="formInfo.ABOXX"></el-input>
                <el-input style="width:81px" v-model="formInfo.RHXX"></el-input>
              </el-form-item>
              <el-form-item label="病人类型">
                <el-input v-model="formInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="孕次">
                <el-input v-model="formInfo.yc"></el-input>
              </el-form-item>
              <el-form-item label="科室">
                <el-input v-model="formInfo.name"></el-input>
              </el-form-item>
            </el-form>
            <el-form
              :inline="true"
              label-width="78px"
              :model="formInfo"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="身高">
                <el-input v-model="formInfo.sg"></el-input>
              </el-form-item>
              <el-form-item label="籍贯">
                <el-input style="width:81px" v-model="formInfo.gj"></el-input>
                <el-input style="width:81px" v-model="formInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="本院外院">
                <el-input v-model="formInfo.age"></el-input>
              </el-form-item>
              <el-form-item label="产次">
                <el-input v-model="formInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="病区">
                <el-input v-model="formInfo.name"></el-input>
              </el-form-item>
            </el-form>
            <el-form
              :inline="true"
              label-width="78px"
              :model="formInfo"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="体重">
                <el-input v-model="formInfo.tz"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="formInfo.sfzhm"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-input v-model="formInfo.csrq"></el-input>
              </el-form-item>
              <el-form-item label="民族">
                <el-input v-model="formInfo.brmz"></el-input>
              </el-form-item>
              <el-form-item label="就诊卡号">
                <el-input v-model="formInfo.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-container class="sqInfo">
          <el-main>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>用血申请信息【申请单号：{{sqdh}}】 (带*号的为必填项)</span>
              </div>
              <div class="item">
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="预定输血时间" prop="ydsxrq">
                    <el-date-picker v-model="formSq.ydsxrq" type="datetime" placeholder="选择日期时间"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="输血目的" prop="sxmd">
                    <el-input style="width:450px" v-model="formSq.sxmd"></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="输血性质" prop="sxxz">
                    <el-select style="width:220px" v-model="formSq.sxxz">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="申请时间" prop="sqrq">
                    <el-date-picker v-model="formSq.sqrq" type="datetime" placeholder="选择日期时间"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="手术名称">
                    <el-input style="width:220px" v-model="formSq.ssmc"></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="输血同意书" prop="name">
                    <el-select style="width:220px" v-model="formSq.name">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="用血评估" prop="name">
                    <el-input style="width:220px" v-model="formSq.name"></el-input>
                  </el-form-item>
                  <el-form-item label="紧急程度" prop="name">
                    <el-select style="width:220px" v-model="formSq.jjcd">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="核准医生">
                    <el-input style="width:220px" v-model="formSq.hzys"></el-input>
                  </el-form-item>
                  <el-form-item label="申请医生">
                    <el-input style="width:220px" v-model="formSq.sqys"></el-input>
                  </el-form-item>
                  <el-form-item label="审核医生">
                    <el-input style="width:220px" v-model="formSq.shys"></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="申请ABO" prop="sqaboxx">
                    <el-input style="width:220px" v-model="formSq.sqaboxx"></el-input>
                  </el-form-item>
                  <el-form-item label="用血备注">
                    <el-input style="width:450px" v-model="formSq.bz"></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  :inline="true"
                  label-width="110px"
                  :model="formSq"
                  class="demo-form-inline"
                  size="mini"
                  :rules="rules"
                  ref="ruleForm"
                >
                  <el-form-item label="申请RHD" prop="sqrhxx">
                    <el-input style="width:220px" v-model="formSq.sqrhxx"></el-input>
                  </el-form-item>
                  <el-form-item label="特殊要求">
                    <el-input style="width:450px" v-model="formSq.name"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
            <el-container>
              <el-main>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>输血成分</span>
                  </div>
                  <div class="flexTop">
                    <el-button size="mini">新增</el-button>
                    <el-button size="mini">删除</el-button>
                    <el-input
                      size="mini"
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      v-model="searchInp"
                    ></el-input>
                  </div>
                  <el-table :data="tableDataBottom" height="250" border style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                  </el-table>
                </el-card>
              </el-main>
              <el-aside width="280px">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>输血科审核结果</span>
                  </div>
                  <el-form ref="form" :model="shForm" label-width="80px">
                    <el-form-item label="审核结果">
                      <el-select size="mini" v-model="shForm.name">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="审核医师">
                      <el-input size="mini" v-model="shForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="审核时间">
                      <el-date-picker
                        style="width:183px"
                        size="mini"
                        v-model="shForm.name"
                        type="datetime"
                        placeholder="选择日期时间"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="审核理由">
                      <el-input
                        size="mini"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="shForm.name"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-aside>
            </el-container>
          </el-main>
          <el-aside width="200px">
            <el-collapse accordion>
              <el-collapse-item title="检验信息" name="1">
                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
              </el-collapse-item>
              <el-collapse-item title="输血适应症" name="2">
                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
              </el-collapse-item>
              <el-collapse-item title="输血前九项" name="3">
                <div>简化流程：设计简洁直观的操作流程；</div>
                <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
              </el-collapse-item>
            </el-collapse>
          </el-aside>
        </el-container>
      </el-main>
    </el-container>

    <el-dialog title="输血效果评价" :visible.sync="sxpjDialog" width="65%">
      <sxpjDialog></sxpjDialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sxpjDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增输血申请单确认" :visible.sync="addsxsqdDialog" width="30%">
      <h3>{{formInfo.bch}}床   {{formInfo.brxm}}患者,是否新增输血申请单</h3>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getSxsqdh">确认</el-button>
        <el-button @click="addsxsqdDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const bloodApplicationFormLeftCard = () => import("@/components/bloodApplicationFormLeftCard")
const sxpjDialog = () => import("@/components/bloodApplicationForm/sxpjDialog")
import {formatDate } from '../js/unit'
export default {
  data() {
    return {
      formInfo: {},
      formSq: {
        name: "",
        ydsxrq: "",
        sxxz:'',
        sxmd:'',
        sqrq:'',
        ssmc:'',
        sqaboxx:'',
        sqrhxx:'',
        jjcd:'',
        sqys:'',
        shys:'',
        hzys:'',
        bz:''
      },
      rules: {
        ydsxrq: [{ required: true, message: " ", trigger: "blur" }],
        sxmd: [{ required: true, message: " ", trigger: "blur" }],
        sxxz: [{ required: true, message: " ", trigger: "blur" }],
        sqaboxx: [{ required: true, message: " ", trigger: "blur" }],
        sqrhxx: [{ required: true, message: " ", trigger: "blur" }],
      },
      tableDataBottom: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      searchInp: "",
      shForm: {
        name: "",
      },
      sxpjDialog:false,
      addsxsqdDialog:false,
      disabledSave:true,
      sqdh:0,
      isSfsxtys:false
    };
  },
  components: {
    'bloodApplicationFormLeftCard':bloodApplicationFormLeftCard,
    sxpjDialog
  },
  methods:{
    getUserInfo(msg){
      if (msg.sfsxtys == "0") {
        this.isSfsxtys = false
      } else {
        this.isSfsxtys = true
      }
      this.formInfo = msg
      this.formInfo['csrq'] = formatDate(msg.csrq)
    },
    //新增用血申请单
    getSxsqdh(){
      if (!this.formInfo.zyh) {
        this.$message.error('请选择患者在添加');
        return
      }
      this.$ajax.get(`/yx/getSxsqdh?zyh=${this.formInfo.zyh}`,{}).then(res => {
        if (res.code == "0") {
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.sqdh = res.data
          this.addsxsqdDialog = false
          this.disabledSave = false
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.el-container {
  padding: 0;
  .el-main {
    padding: 0 10px;
  }
  .sqdForm {
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 175px;
    }
  }
  /deep/ .el-tabs__content {
    padding-bottom: 0;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .flexItem {
    /deep/ .el-form-item__content {
      display: flex;
    }
    button {
      height: 30px;
      margin-top: 6px;
    }
  }
}
.block {
  margin-top: 7px;
}
.cardRight {
  font-size: 14px;
  float: right;
  .el-link {
    margin-right: 5px;
  }
}
.box-card {
  margin: 5px 5px 5px 0;
  /deep/ .el-card__body {
    padding: 5px 0;
    .el-select {
      width: 180px;
    }
  }
  /deep/ .el-card__header {
    padding: 13px 20px;
    background-color: #ededed;
  }
}
.item {
  .el-form--inline {
    margin-bottom: 5px;
  }
}
.sqInfo {
  /deep/ .el-main {
    padding: 0;
  }
}
.flexTop {
  display: flex;
  margin-bottom: 5px;
  .el-input {
    margin-left: 10px;
  }
}
.demo-form-inline{
  /deep/ .el-select{
    width: 167px !important;
  }
}
</style>